<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>场所管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="__CSS__/oksub.css">
    <script type="text/javascript" src="__LIB__/loading/okLoading.js"></script>
</head>
<body>
<div class="ok-body">
    <!--模糊搜索区域-->
    <form class="layui-form ok-search-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" name="name" placeholder="场所名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" name="contact" placeholder="联系人" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" name="cellphone" placeholder="联系电话" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <select name="cate_id" id="icafecate">
                        <option value="" selected>请选择场所类型</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <select name="status">
                        <option value="" selected>请选择状态</option>
                        <option value="1">已启用</option>
                        <option value="0">已禁用</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <button class="layui-btn" lay-submit lay-filter="search">
                        <i class="layui-icon">&#xe615;</i>
                    </button>
                </div>
            </div>
        </div>
    </form>
    <!--数据表格-->
    <table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
</div>
<!--js逻辑-->
<script src="__LIB__/layui/layui.js"></script>
<script>
    layui.use(["element", "jquery", "table", "form", "okLayer", "okUtils"], function () {
        let $ = layui.jquery;
        let table = layui.table;
        let form = layui.form;
        let okLayer = layui.okLayer;
        let okUtils = layui.okUtils;
        okLoading.close($);

        okUtils.ajax("{:url('icafeCate/getValidIcafeCate')}").done(function (response) {
            $.each(response.data, function(index, item) {
                $('#icafecate').append(new Option(item.name, item.id));
            });
            form.render('select');
        }).fail(function (error) {
            // console.log(error)
        });
        
        let dataTable = table.render({
            elem: '#tableId',
            url: "{:url('Icafe/getTableData')}",
            limit: 15,
            limits: [10, 15, 20, 30, 50, 100, 150, 200, 300, 500],
            page: true,
            toolbar: "#toolbarTpl",
            size: "sm",
            cols: [[
                {type: "checkbox"},
                {field: "id", title: "ID", width: 60},
                {field: "name", title: "场所名称", width: 160, templet: "#nameTpl"},
                {field: "contact", title: "联系人", width: 110},
                {field: "cellphone", title: "联系电话", width: 110},
                {field: "cate", title: "场所类型", width: 110, templet: "#cateTpl"},
                //{field: "phone", title: "技术负责人", width: 120},
                {field: "status", title: "状态", width: 80, templet: "#statusTpl"},
                {field: "province", title: "省份", width: 115, templet: "#provinceTpl"},
                {field: "city", title: "城市", width: 90, templet: "#cityTpl"},
                {field: "district", title: "区/县", width: 100, templet: "#districtTpl"},
                {field: "address", title: "详细地址"},
                {title: "操作", minWidth: 120, align: "center", fixed: "right", templet: "#operationTpl"}
            ]],
            done: function (res, curr, count) {
                // console.info(res, curr, count);
            }
        });

        form.on("submit(search)", function (data) {
            dataTable.reload({
                where: data.field,
                page: {curr: 1}
            });
            return false;
        });

        table.on("toolbar(tableFilter)", function (obj) {
            switch (obj.event) {
                case "batchEnabled":
                    batchStatus(1);
                    break;
                case "batchDisabled":
                    batchStatus(0);
                    break;
                case "batchDel":
                    batchDel();
                    break;
                case "add":
                    add();
                    break;
            }
        });

        table.on("tool(tableFilter)", function (obj) {
            let data = obj.data;
            switch (obj.event) {
                case "viewDetails":
                    viewDetails(data);
                    break;
                case "editDetails":
                    editDetails(data);
                    break;
                case "edit":
                    edit(data);
                    break;
                case "del":
                    del(data.id);
                    break;
            }
        });

        function batchStatus(status) {
            operation = 0 === status ? '禁用' : '启用';
            okLayer.confirm("确定要批量" + operation + "吗？", function (index) {
                layer.close(index);
                let idsStr = okUtils.tableBatchCheck(table);
                if (idsStr) {
                    okUtils.ajax("{:url('status')}", "post", {idsStr: idsStr, status: status}, true).done(function (response) {
                        okUtils.tableSuccessMsg(response.msg);
                    }).fail(function (error) {
                        // console.log(error)
                    });
                }
            });
        }

        function batchDel() {
            okLayer.confirm("确定要批量删除吗？", function (index) {
                layer.close(index);
                let idsStr = okUtils.tableBatchCheck(table);
                if (idsStr) {
                    okUtils.ajax("{:url('delete')}", "post", {idsStr: idsStr}, true).done(function (response) {
                        okUtils.tableSuccessMsg(response.msg);
                    }).fail(function (error) {
                        // console.log(error)
                    });
                }
            });
        }

        function add() {
            okLayer.open("添加场所", "{:url('add')}", "710px", "520px", null, function () {
                dataTable.reload();
            })
        }

        function edit(data) {
            window.rowData = data;
            okLayer.open("编辑场所", "{:url('edit')}", "710px", "520px", null, function () {
                dataTable.reload();
            })
        }

        function del(id) {
            okLayer.confirm("确定要删除吗？", function () {
                okUtils.ajax("{:url('delete')}", "post", {idsStr: id}, true).done(function (response) {
                    okUtils.tableSuccessMsg(response.msg);
                }).fail(function (error) {
                    // console.log(error)
                });
            })
        }

        function viewDetails(data) {
            window.rowData = data;
            okLayer.open("查看资料", "{:url('viewDetails')}", "900px", "515px", null, function () {
                dataTable.reload();
            })
        }

        function editDetails(data) {
            window.rowData = data;
            okLayer.open("编辑资料", "{:url('editDetails')}", "900px", "530px", null, function () {
                dataTable.reload();
            })
        }

        let tips = 0;
        $("body").on("mouseover", "#icafeName", function () {
            tips = layer.tips('点击查看详细资料', this, {
                tips: [2, '#4e72b8'],
                time: 0
            })
        }).on("mouseleave", "#icafeName", function () {
            layer.close(tips);
        })
    })
</script>
<!-- 头工具栏模板 -->
<script type="text/html" id="toolbarTpl">
    <div class="layui-btn-container">
        {if has_permission($flag.status)}
        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="batchEnabled">批量启用</button>
        <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="batchDisabled">批量禁用</button>
        {/if}
        {if has_permission($flag.delete)}
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDel">批量删除</button>
        {/if}
        {if has_permission($flag.add)}
        <button class="layui-btn layui-btn-sm" lay-event="add">添加场所</button>
        {/if}
    </div>
</script>
<!-- 行工具栏模板 -->
<script type="text/html" id="operationTpl">
    <div class="layui-btn-container">
        {if has_permission($flag.edit)}
        <button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit" style="height: 19px; line-height: 20px;">
            <i class="layui-icon">&#xe642;</i>编辑
        </button>
        {/if}
        {if has_permission($flag.details)}
        <button class="layui-btn layui-btn-xs layui-btn-warm" lay-event="editDetails"  style="height: 19px; line-height: 20px;">
            <i class="layui-icon">&#xe60a;</i>资料
        </button>
        {/if}
        {if has_permission($flag.delete)}
        <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del" style="height: 19px; line-height: 20px;">
            <i class="layui-icon">&#xe640;</i>删除
        </button>
        {/if}
    </div>
</script>
<!-- 场所名称模板 -->
<script type="text/html" id="nameTpl">
    <a id="icafeName" href="javascript:" lay-event="viewDetails" style="color: #666;">{{d.name}}</a>
</script>
<!-- 场所类型模板 -->
<script type="text/html" id="cateTpl">
    {{#  if(d.icafeCate == null) { }}
    <span class="layui-badge layui-btn-disabled layui-btn-xs ibms-btn-xs">未知类型</span>
    {{#  } else if(d.icafeCate.bgcolor == "") { }}
    <span class="layui-badge layui-btn-primary layui-btn-xs ibms-btn-xs">{{d.icafeCate.name}}</span>
    {{#  } else { }}
    <span class="layui-badge layui-btn-xs ibms-btn-xs" style="background-color: {{d.icafeCate.bgcolor}};">{{d.icafeCate.name}}</span>
    {{#  } }}
</script>
<!-- 启用|禁用模板 -->
<script type="text/html" id="statusTpl">
    {{#  if(d.status == 1){ }}
    <span class="layui-badge layui-btn-normal layui-btn-xs ibms-btn-xs">已启用</span>
    {{#  } else if(d.status == 0) { }}
    <span class="layui-badge layui-btn-warm layui-btn-xs ibms-btn-xs">已禁用</span>
    {{#  } }}
</script>
<!-- 省市区模板 -->
<script type="text/html" id="provinceTpl">
    <span>{{d.areaName.provinceName}}</span>
</script>
<script type="text/html" id="cityTpl">
    <span>{{d.areaName.cityName}}</span>
</script>
<script type="text/html" id="districtTpl">
    <span>{{d.areaName.districtName}}</span>
</script>
</body>
</html>
